@extends('layouts.admin')
@section('pageTitle', '数据统计')
@inject('storeService', 'App\App\Services\StorageService')
@section('style')
@endsection
@section('content')

    <div class="main-panel">
        <div class="content">
            <div class="container-fluid">
                <ol class="breadcrumb" style="margin-bottom:8px;position:relative;">
                    <li>首页</li>
                    <li>活动管理</li>
                    <li>活动统计</li>
                    <li class="active">活动报表</li>
                    <div class="info-box">
                        <span>活动名称: 红包雨</span>
                        <span>活动类型: 签到</span>
                    </div>
                </ol>
                <div class="mini-charts">
                    <div class="row">
                        <div class="col-sm-12 col-md-4">
                            <div class="mini-charts-item">
                                <div class="clearfix">
                                    <div class="count abc">
                                        <small class="text-s1">活动数据</small>
                                        <hr>
                                        <small class="text-s2">新增参与次数</small>
                                        <small class="text-s1">累计活动次数: 0</small>
                                        <div class="big-num">0</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-12 col-md-4">
                            <div class="mini-charts-item">
                                <div class="clearfix">
                                    <div class="count abc">
                                        <small class="text-s1">用户数据</small>
                                        <hr>
                                        <small class="text-s2">新增参与人数</small>
                                        <small class="text-s1">累计活动人数: 0</small>
                                        <div class="big-num">0</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-12 col-md-4">
                            <div class="mini-charts-item">
                                <div class="clearfix">
                                    <div class="count abc">
                                        <small class="text-s1">奖品数据</small>
                                        <hr>
                                        <small class="text-s2">成功兑奖人数</small>
                                        <small class="text-s1" style="color:#0099FF">处理中奖信息</small>
                                        <div class="big-num">0</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card" id="cardBox">
                    <ul class="nav nav-pills" style="padding:20px 30px;">
                        <li data-type="0" class="active"><a>活动数据</a></li>
                        <li data-type="1"><a>用户数据</a></li>
                        <li data-type="2"><a>奖品数据</a></li>
                    </ul>
                    <div id="cardWrap">
                        <div class="swiper-box sb1">
                            <div class="content">
                                <div>
                                    <div class="chartbox1">
                                        <div class="chartboxitem" id="trans-box"></div>
                                        <div class="chartboxitem" id="person-num-box"></div>
                                    </div>
                                    <div id="trendbox1">
                                        <div class="trend-item">
                                            <div class="trend-left">
                                                <p>432</p>
                                                <div class="trend-left-name">打开人数</div>
                                            </div>
                                            <div class="trend-right up">100%</div>
                                        </div>
                                        <div class="trend-item">
                                            <div class="trend-left">
                                                <p>123</p>
                                                <div class="trend-left-name">参与人数</div>
                                            </div>
                                            <div class="trend-right down">46%</div>
                                        </div>
                                        <div class="trend-item">
                                            <div class="trend-left">
                                                <p>13</p>
                                                <div class="trend-left-name">分享人数</div>
                                            </div>
                                            <div class="trend-right up">100%</div>
                                        </div>
                                    </div>
                                </div>
                                <div class="header">
                                    <div style="width:10%;display:inline-block;"><input type='text' class='form-control selectData' id='selectData' value="2018-05-22"></div>
                                    至
                                    <div style="width:10%;display:inline-block;"><input type='text' class='form-control selectData' id='selectData' value="2018-05-22"></div>
                                    <span>导出excel表</span>
                                </div>
                                <table class="table">
                                    <thead>
                                    <th data-field="name" data-sortable="false">日期</th>
                                    <th data-field="created_at" data-sortable="true">打开数</th>
                                    <th data-field="model.name" data-sortable="true">参与数</th>
                                    <th data-field="startTime" data-sortable="true">分享数</th>
                                    </thead>
                                    <tbody>
                                    <tr>
                                        <td>2018-03-03</td>
                                        <td>3</td>
                                        <td>3</td>
                                        <td>3</td>
                                    </tr>
                                    <tr>
                                        <td>2018-03-03</td>
                                        <td>3</td>
                                        <td>3</td>
                                        <td>3</td>
                                    </tr>
                                    <tr>
                                        <td>2018-03-03</td>
                                        <td>3</td>
                                        <td>3</td>
                                        <td>3</td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <div class="swiper-box sb2">
                            <div class="content">
                                <div>
                                    <div class="chartbox1">
                                        <div class="chartboxitem" id="sex-box"></div>
                                        <div class="chartboxitem" id="map-box"></div>
                                    </div>
                                </div>
                                <div class="header">用户属性<span>导出excel表</span></div>
                                <table id="bootstrap-table-container" class="table">
                                    <thead>
                                    <th data-sortable="false">性别</th>
                                    <th data-sortable="false">人数</th>
                                    <th data-sortable="false">比例</th>
                                    </thead>
                                    <tbody>
                                    <tr>
                                        <td>3</td>
                                        <td>3</td>
                                        <td>3</td>
                                    </tr>
                                    <tr>
                                        <td>3</td>
                                        <td>3</td>
                                        <td>3</td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <div class="swiper-box sb3">
                            <div class="content">
                                <div class="header">中奖信息<span>处理中奖信息</span><span style="margin-right:30px;">导出excel表</span></div>
                                <div class="lottery-box">
                                    <div class="lottery-item">
                                        <div class="lottery-num">5</div>
                                        <div class="lottery-name">未中奖</div>
                                    </div>
                                    <div class="lottery-item">
                                        <div class="lottery-num">5</div>
                                        <div class="lottery-name">未兑奖</div>
                                    </div>
                                    <div class="lottery-item">
                                        <div class="lottery-num">5</div>
                                        <div class="lottery-name">兑奖成功</div>
                                    </div>
                                    <div class="lottery-item">
                                        <div class="lottery-num">5</div>
                                        <div class="lottery-name">兑奖失败</div>
                                    </div>
                                </div>
                                <div class="header">奖品消耗<span>导出excel表</span></div>
                                <table id="bootstrap-table-container" class="table">
                                    <thead>
                                    <th data-field="name" data-sortable="false">奖品名称</th>
                                    <th data-field="created_at" data-sortable="true">添加总数</th>
                                    <th data-field="model.name" data-sortable="true">兑奖成功</th>
                                    <th data-field="startTime" data-sortable="true">兑奖失败</th>
                                    <th data-field="startTime" data-sortable="true">未兑奖</th>
                                    <th data-field="startTime" data-sortable="true">奖品剩余</th>
                                    </thead>
                                    <tbody>
                                    <tr>
                                        <td>iphoneX</td>
                                        <td>4</td>
                                        <td>3</td>
                                        <td>3</td>
                                        <td>3</td>
                                        <td>5</td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('script')
    <script>


        $(document).ready(function () {
            $('.nav-pills li').on('click', function () {
                var $this = $(this);
                if ($this.hasClass('active'))return;
                var type = $this.data('type');
                $('#cardWrap').css('left',-100*type+'%');
                $this.siblings('li').removeClass('active');
                $this.addClass('active');
            });

            $('#selectData').datepicker({
                autoclose: true, //自动关闭
                beforeShowDay: $.noop,    //在显示日期之前调用的函数
                calendarWeeks: false,     //是否显示今年是第几周
                clearBtn: false,          //显示清除按钮
                daysOfWeekDisabled: [],   //星期几不可选
                endDate: Infinity,        //日历结束日期
                forceParse: true,         //是否强制转换不符合格式的字符串
                format: 'yyyy-mm-dd',     //日期格式
                keyboardNavigation: true, //是否显示箭头导航
                language: 'cn',           //语言
                minViewMode: 0,
                orientation: "auto",      //方向
                rtl: false,
                startDate: -Infinity,     //日历开始日期
                startView: 0,             //开始显示
                todayBtn: false,          //今天按钮
                todayHighlight: false,    //今天高亮
                weekStart: 0              //星期几是开始
            });

            var transChart = echarts.init(document.getElementById('trans-box'));
            transOption = {
                title : {
                    text: '漏斗图'
                },
                legend: {
                    data : ['打开','参与','分享']
                },
                calculable : true,
                series : [
                    {
                        name:'漏斗图',
                        type:'funnel',
                        width: '40%',
                        data:[
                            {value:60, name:'参与'},
                            {value:30, name:'分享'},
                            {value:90, name:'打开'}
                        ]
                    }
                ]
            };
            transChart.setOption(transOption);

            var personChart = echarts.init(document.getElementById('person-num-box'));
            personOption = {
                title : {
                    text: '2018-04-02至2018-04-02数据',
                },
                legend: {
                    data:['人数', '次数', '人均次数'],
                    x: 'right'
                },
                calculable : true,
                xAxis : [
                    {
                        type : 'category',
                        data : ['2018-04-02']
                    }
                ],
                yAxis : [
                    {
                        type : 'value'
                    }
                ],
                series : [
                    {
                        name:'人数',
                        type:'bar',
                        data:[5.0]
                    },
                    {
                        name:'次数',
                        type:'bar',
                        data:[4.0]
                    },
                    {
                        name:'人均次数',
                        type:'bar',
                        data:[3.0]
                    }
                ]
            };
            personChart.setOption(personOption);

            var sexChart = echarts.init(document.getElementById('sex-box'));
            sexOption = {
                title : {
                    text: '性别比例'
                },
                legend: {
                    orient : 'vertical',
                    x : 'left',
                    y : 'center',
                    data:['男','女']
                },
                calculable : true,
                series : [
                    {
                        name:'访问来源',
                        type:'pie',
                        radius : ['50%', '70%'],
                        itemStyle : {
                            normal : {
                                label : {
                                    show : false
                                },
                                labelLine : {
                                    show : false
                                }
                            },
                            emphasis : {
                                label : {
                                    show : true,
                                    position : 'center',
                                    textStyle : {
                                        fontSize : '30',
                                        fontWeight : 'bold'
                                    }
                                }
                            }
                        },
                        data:[
                            {value:335, name:'男'},
                            {value:310, name:'女'}
                        ]
                    }
                ]
            };
            sexChart.setOption(sexOption);

            var mapChart = echarts.init(document.getElementById('map-box'));
            mapOption = {
                title : {
                    text: '地域分析'
                },
                tooltip : {
                    trigger: 'item'
                },
                dataRange: {
                    orient: 'horizontal',
                    min: 0,
                    max: 55000,
                    text:['高','低'],           // 文本，默认为数值文本
                    splitNumber:0
                },
                toolbox: {
                    show : true,
                    orient: 'vertical',
                    x:'right',
                    y:'center',
                    feature : {
                        mark : {show: true},
                        dataView : {show: true, readOnly: false}
                    }
                },
                series : [
                    {
                        name: '2011全国GDP分布',
                        type: 'map',
                        mapType: 'china',
                        mapLocation: {
                            x: 'left'
                        },
                        selectedMode : 'multiple',
                        itemStyle:{
                            normal:{label:{show:true}},
                            emphasis:{label:{show:true}}
                        },
                        data:[
                            {name:'西藏', value:605.83},
                            {name:'青海', value:1670.44},
                            {name:'宁夏', value:2102.21},
                            {name:'海南', value:2522.66},
                            {name:'甘肃', value:5020.37},
                            {name:'贵州', value:5701.84},
                            {name:'新疆', value:6610.05},
                            {name:'云南', value:8893.12},
                            {name:'重庆', value:10011.37},
                            {name:'吉林', value:10568.83},
                            {name:'山西', value:11237.55},
                            {name:'天津', value:11307.28},
                            {name:'江西', value:11702.82},
                            {name:'广西', value:11720.87},
                            {name:'陕西', value:12512.3},
                            {name:'黑龙江', value:12582},
                            {name:'内蒙古', value:14359.88},
                            {name:'安徽', value:15300.65},
                            {name:'北京', value:16251.93, selected:true},
                            {name:'福建', value:17560.18},
                            {name:'上海', value:19195.69, selected:true},
                            {name:'湖北', value:19632.26},
                            {name:'湖南', value:19669.56},
                            {name:'四川', value:21026.68},
                            {name:'辽宁', value:22226.7},
                            {name:'河北', value:24515.76},
                            {name:'河南', value:26931.03},
                            {name:'浙江', value:32318.85},
                            {name:'山东', value:45361.85},
                            {name:'江苏', value:49110.27},
                            {name:'广东', value:53210.28, selected:true}
                        ]
                    }
                ]
            };
            mapChart.setOption(mapOption);
        });
    </script>
@endsection